<template>
  <el-dialog
    title="题目预览"
    :visible="questionsPreviewshow"
    width="width"
    class="box"
    @close="btnCancel"
  >
    <!-- 1题目信息 -->
    <!-- 1.1采用layout布局 -->
    <!-- 1.1.1上面一行 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">【题型】：{{ previewData.questionType | questionTypesfilter }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【编号】：{{ previewData.id }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【难度】：{{ previewData.difficulty |difficultysfilter }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【标签】：{{ previewData.tags }}</div>
      </el-col>
    </el-row>
    <!-- 1.1.2 下面一行 -->
    <el-row
      :gutter="20"
      class="detailed"
    >
      <el-col :span="6">
        <div class="grid-content bg-purple">【学科】：{{ previewData.subjectName }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【目录】：{{ previewData.directoryName }}</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">【方向】：{{ previewData.direction }}</div>
      </el-col>
      <el-col :span="6" />
    </el-row>
    <!-- 2题干 -->
    <div class="questionItem">
      <!-- 题干 -->
      <div>【题干】：</div>
      <!-- 题目 and 2.3简答预览效果 -->
      <div
        style="color : #5858ff"
        v-html="previewData.question"
      />
      <!-- 2.1单选预览效果 -->
      <div v-if="previewData.questionType==='1'">
        <div>单选题 选项： (以下选项中的为正确答案)</div>
        <el-radio-group v-model="radio">
          <div
            v-for="obj in previewData.options"
            :key="obj.id"
          >
            <el-radio
              :label="obj.isRight"
              :disabled="obj.isRight !==1"
            >{{ obj.title }}</el-radio>
          </div>
        </el-radio-group>
      </div>
      <!-- 2.2多选预览效果 -->
      <div v-else-if="previewData.questionType==='2'">
        <div>多选题 选项： (以下选项中的为正确答案)</div>
        <el-checkbox-group v-model="checkList">
          <div
            v-for="obj in previewData.options"
            :key="obj.id"
          >
            <el-checkbox
              :label="obj.isRight"
              :disabled="obj.isRight !==1"
            >{{ obj.title }}</el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 3参考视频解析 -->
    <div>
      <span>【参考答案】：</span>
      <el-button
        type="danger"
        @click="showAnswer"
      >视频答案预览</el-button>
      <!--视屏容器 -->
      <div
        v-if="showanswer"
        class="video-tem"
      >
        <video-player
          ref="videoPlayer"
          class="video-player vjs-custom-skin"
          :playsinline="true"
          :options="playerOptions"
        />

      </div>
    </div>
    <!-- 4答案解析 -->
    <div class="questAnalysis">
      <span>【答案解析】：</span> <span v-html="previewData.answer" />
    </div>
    <!-- 5题目备注 -->
    <div>
      <span>【题目备注】：</span> <span v-html="previewData.remarks" />
    </div>
    <!-- 6关闭按钮 -->
    <el-row
      slot="footer"
      type="flex"
      justify="end"
    >
      <el-button
        type="primary"
        @click="btnCancel"
      >关闭</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
// 引入获取详细信息的接口
import { detail } from '@/api/hmmm/questions'
// 引入用于枚举的题型 和难度数据
export default {
  name: 'QuestionsPreview',
  props: {
    // 控制显示的
    questionsPreviewshow: {
      type: Boolean,
      default: false
    }
    // // 接受传过的id
    // questionsId: {
    //   type: String,
    //   required: true
    // }

  },
  data () {
    return {
      showanswer: false, // 显示答案
      radio: 1, // 绑定的是单选值
      checkList: [1], // 对选框
      // 这是视频组件
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        hls: true,
        poster: '', // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      // 预览基本信息
      previewData: {}

    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 定义一个方法父组件调用是因为props 是异步的
    async detail (obj) {
      const { data } = await detail(obj)
      this.previewData = data
      // console.log(this.previewData)
      this.playerOptions.sources.src = await data.videoURL
    },
    // 点击按钮预览答案
    showAnswer () {
      this.showanswer = true
      this.playerOptions.sources[0].src = this.previewData.videoURL
    },
    // 取消按钮
    btnCancel () {
      this.showanswer = false
      this.$emit('update:questionsPreviewshow', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.detailed {
  margin: 20px 0;
}
.questionItem {
  border-top: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
  padding: 10px 0;
  margin-bottom: 10px;
  div {
    padding: 5px 0;
  }
}
.video-tem {
  width: 400px;
  height: 225px;
}
.questAnalysis {
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
}
</style>
